<template>
  <view class="levelEquiptment">
    <u-navbar :is-back="true"   :custom-back="BackM" title="下级设备" back-text="">
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <view style="padding: 0rem 0.5rem; display: flex; align-items: center">
          <!-- <view style="
font-size: 0.75rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;" >员工规则</view> -->
          <!-- <image style="width: 0.7rem;
height: 0.5rem;
padding: 0.3rem;" src="../../../style/image/my/bottomArrow.jpg" alt=""> -->
        </view>
      </view>
    </u-navbar>

    <view class="search" :style="{ width: '100%' }">
      <u-search
        placeholder="请输入商户姓名或电话"
        shape="round"
         @search='search'
        v-model="keyword"
        :show-action="false"
      ></u-search>
    </view>

    <view class="tabwiperC">
      <u-tabs-swiper
        ref="tabs"
        name="modelsName"
        :list="list"
        active-color="#4dbf92"
        inactive-color=""
        count="count"
        height="120"
        :is-scroll="false"
        :current="current"
        bar-width="80"
        gutter="80"
        @change="tabsChange"
      ></u-tabs-swiper>
    </view>

    <view class="listP" v-for="(item, index) in showData" :key="index">
      <view
        style="
          font-size: 0.79rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #000000;
        "
      >
        {{item.nickName}}
      </view>
      <view
        style="
          font-size: 0.79rem;
          font-family: PingFang SC;
          font-weight: 300;
          color: #02af74;
        "
      >
        {{item.posTypeCount}}
      </view>
    </view>

     <view  style="margin-top:2rem;" >
          <u-empty   v-if="showData.length==0" text="暂无数据" mode="data"></u-empty>
        </view>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import Unavbar from "../../uview-ui/components/u-navbar/u-navbar.vue";


import {
  findLowerPosTypeBox,
  findLowerProxyPosTypeCount,
} from "../../utils/uniApi";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components:{
       "u-navbar": Unavbar
  }
}
)
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public oneCount = 1;

  public keyword = "";

  public list: any = [
    {
      modelsName: "全部设备",
      id: 0,
    },
  ];
  public current = 0;

  public showData: any = [];

  public posTypeId = "";
  public pageData = 1;
  public continueTypes = true;

  created() {

uni.showLoading({
	title: '加载中'
});
    this.accrordBarM();
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
  onLoad(options: any) {
    setTimeout(function () {
      console.log("start pulldown");
    }, 1000);

    // uni.startPullDownRefresh();
  }

  onPullDownRefresh() {
    console.log("refresh----这里进行处理");

    setTimeout(function () {
      uni.redirectTo({
        url: "../../pages/equipment/levelEquipment",
      });
      uni.stopPullDownRefresh();
    }, 1000);
  }

  accrordBarM() {
    let params = {
      userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
    };

    findLowerPosTypeBox(params).then((res: any) => {
      if (res) {
        console.log("下级分类头部", res);

        // if( this.posTypeId==''){
        // this.posTypeId = res.data.data[0].posTypeId;
        //   }else{

        //    }
        res.data.data.filter((item: any, index: number) => {
          let arr = [];
          var obj: object = {
            modelsName: `${item.modelsName}`,
            id: item.id,
          };

          this.list.push(obj); //头部
          console.log(this.list);
        });

        let datas = {
          keyWord: "",
          pageNo: this.pageData,
          pageSize: 10,
          posTypeId: this.posTypeId,
          userId:
            uni.getStorageSync("userId") == ""
              ? ""
              : parseInt(uni.getStorageSync("userId")),
        };

        findLowerProxyPosTypeCount(datas).then((res: any) => {
          
console.log(res.data.data, "1获取每一个机型的列表数据");
        // this.continueType=res.data.hasNext  //true   

          var boolee= res.data.hasNext==false&&this.continueTypes==false

          console.log(res.data.hasNext,this.continueTypes,boolee)

          if(res.data.isFirst||!boolee){
          
          res.data.data.filter((item:any,index:number)=>{

          this.showData.push(item)

            if(res.data.hasNext==false){
                 this.continueTypes=false
            }
          
         })
            uni.hideLoading();
          }else{

            // alert("buzhix")

          }


        });
      } else {
        uni.showToast({
          title: "请求失败",
          icon: "none",
          duration: 2000,
        });
      }
    });
  }


accordingM(){

   let datas = {
          keyWord: "",
          pageNo: this.pageData,
          pageSize: 10,
          posTypeId: this.posTypeId,
          userId:uni.getStorageSync("userId") == "" ? "": parseInt(uni.getStorageSync("userId")),
        };

        findLowerProxyPosTypeCount(datas).then((res: any) => {
          
console.log(res.data.data, "1获取每一个机型的列表数据");
        // this.continueType=res.data.hasNext  //true   

          var boolee= res.data.hasNext==false&&this.continueTypes==false

          console.log(res.data.hasNext,this.continueTypes,boolee)

          if(res.data.isFirst||!boolee){
          
          res.data.data.filter((item:any,index:number)=>{

          this.showData.push(item)

            if(res.data.hasNext==false){
                 this.continueTypes=false
            }
          
         })
            uni.hideLoading();
          }else{
            // alert("buzhix")
            console.log('已无更多数据')
          }


        });

}
   BackM() {
    uni.switchTab({
      url: "./index",
    });
  }

  tabsChange(index:any){
    console.log('切换')

     uni.showLoading({
      title: "加载中",
    });
    this.showData=[]
     this.current = index;

    this.getBarId(index)
  }
  getBarId(index: any) {
    this.list.filter((itemed: any, indexed: number) => {
      if (index == indexed) {
        console.log(itemed);
        this.posTypeId = itemed.id;
        console.log(this.posTypeId,'this.posTypeId')

         this.accordingM();

        // let paramsed = {
        //   userId: 1,
        //   posTypeId: this.posTypeId, // 机型ID
        //   // state:'' ,  //铺货状态 yph 已铺货|wph 未铺货
        //   type: this.CDType, //  0 充电宝，1充电宝底座
        //   pageNo: 1,
        //   pageSize: 10,
        // };
        // console.log("获取每一个机型的列表", paramsed);

        // findTerminalByType(paramsed).then((res: any) => {
        //   console.log(res, "0000");
        //   this.showData = res.data.data;
        //   uni.hideLoading();
        // });
      }
    });
  }

   search(){

   this.accordingM()

    //  this.showDataListS.splice(0, this.showDataListS.length);

    // this.searchFlag = true;

    // console.log(this.showDataListS, "this.showDataListS");

    // setTimeout(() => {
    //   console.log(this.showDataListS, "this.-------");

    //   if (this.showDataListS.length == 0) {
    //     this.findTerminalByTypeM();
    //   } else {
    //     console.log("真美");
    //     //  this.findTerminalByTypeM();
    //   }
    // }, 200);
    
  }


   @Watch("keyword")
   userInputM(a:any,b:any) {
    console.log(a,b);
   }




}
</script>

<style lang="scss" scoped>
.tabwiperC {
  border-bottom: 1px solid #e5e5e5;
}
.levelEquiptment {
  background-color: #f4f5f7;
  height: 100vh;
}

.search {
  width: 100%;
  padding: 0.5rem 0.8rem;
  background-color: white;
  /* background-color:#f4f5f7; */
}

.listP {
  display: flex;
  padding: 1rem;
  background-color: white;
  border-bottom: 1px solid #e5e5e5;
  justify-content: space-between;
}
</style>